<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02.lifeCycle.html</title>
</head>
<body>
<div id="app"></div>
<script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

<script>
  const {
    reactive,
    effect,
    shallowReactive,
    readonly,
    shallowReadonly,
    createApp,
    toRefs,
    onMounted,
    onBeforeMount,
    onBeforeUpdate,
    onUpdated,
    getCurrentInstance,
    h
  } = VueRuntimeDOM

  const App = {
    setup(){
      const state = reactive({name:'ahhh',age:123});

      console.log('getCurrentInstance():',getCurrentInstance())

      onBeforeMount(()=>{
        console.log('before mount');
      });

      onMounted(()=>{
        console.log('getCurrentInstance():',getCurrentInstance())
        console.log('mounted');
      });

      onBeforeUpdate(()=>{
        console.log('onBeforeUpdate')
      })

      onUpdated(()=>{
        console.log('onUpdated')
      })

      setTimeout(()=>{
        state.age = 234;
      },1000)

      return ()=>{
        return h('div',state.age)
      }
    },
  }

  createApp(App).mount('#app');
</script>
</body>
</html>
